<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="common-layout"
    style="width: 100%; height: 100%; background-color: #f2f2f2;box-sizing: border-box; padding: 30px 25px; ">
    <el-container style="width: 100%;">
      <el-header style="width: 100%;height: 100px;margin-bottom: 400px;">
        <div style="font-size: 24px; font-weight: 600 ;margin-bottom: 20px;">职位管理</div>
        <!-- <div style="margin: 0;"> -->
        <el-icon style="color: #fff; position: relative; left: 25px; top: 3px; font-weight: 500;">
          <Plus />
        </el-icon>
        <el-button type="primary" style="width: 90px;padding: 5px;box-sizing: border-box;" icon="el-icon-plus"
          @click="">添加职位</el-button>
        <!-- </div> -->
        <el-card style="width: 100%;">
          <div style="margin-bottom: 10px;margin-top: 20px; font-size: 14px;">部门</div>
          <el-select v-model="value" placeholder="全部" style="width: 100%;">
            <el-option style="padding-left: 10px;" class="options" v-for="item in options" :key="item.value"
              :label="item.label" :value="item.value" />
          </el-select>
          <div style="margin-bottom: 10px;margin-top: 20px; font-size: 14px;">级别</div>
          <el-select v-model="value" placeholder="级别" style="width: 100%;">
            <el-option style="padding-left: 10px;" class="options" v-for="item in options1" :key="item.value"
              :label="item.label" :value="item.value" />
          </el-select>
          <div style="margin-bottom: 10px;margin-top: 20px; font-size: 14px;">状态</div>
          <el-select v-model="value" placeholder="全部" style="width: 100%;">
            <el-option style="padding-left: 10px;" class="options" v-for="item in options2" :key="item.value"
              :label="item.label" :value="item.value" />
          </el-select>
          <div style="margin-bottom: 10px;margin-top: 20px; font-size: 14px;">搜索职位</div>
          <el-input v-model="input" style="width: 100%" placeholder="输入职位名称..." />
          <div style="width: 100%;margin-top: 20px;">
            <el-button style="width: 70px;height: 30px;" type="primary" :icon="Search">筛选</el-button>
            <el-icon style="position: relative;left: 25px; top: 3px;">
              <Refresh />
            </el-icon>
            <el-button style="width: 70px;padding-left: 10px; height: 30px;" v-for="button in buttons"
              :key="button.text" :type="button.type" text bg>
              {{ button.text }}
            </el-button>
          </div>
        </el-card>
      </el-header>
      <el-main>
        <el-row
          style="width: 100%; height: 60px; font-weight: 600; font-size: 16px; padding-left:10px ;border-bottom: 1px solid #f2f2f2; line-height: 60px;border-radius: 10px 10px 0 0; background-color: #Fff;">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">职位列表</el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">

          <el-table-column label="职位名称" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <timer />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="部门" style="background: #ccc;" prop="name" width="180">

          </el-table-column>
          <el-table-column label="所需技能" prop="name" width="120">

          </el-table-column>
          <el-table-column label="级别" width="150">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>name: {{ scope.row.name }}</div>
                  <div>address: {{ scope.row.address }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.name }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="招聘人数" width="150">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>name: {{ scope.row.name }}</div>
                  <div>address: {{ scope.row.address }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.name }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="150">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>name: {{ scope.row.name }}</div>
                  <div>address: {{ scope.row.address }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.name }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>

</template>
<script lang='ts' setup>
import { ref } from 'vue'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { Timer } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const buttons = [
  { type: '', text: '重置' },

] as const
const value = ref('')
const input = ref('')
const options = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: 'Option2',
    label: '工程部',
  },
  {
    value: 'Option3',
    label: '设计部',
  },
  {
    value: 'Option4',
    label: '市场部',
  },
  {
    value: 'Option5',
    label: '人力资源部',
  },
]
const options1 = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: 'Option2',
    label: '初级',
  },
  {
    value: 'Option3',
    label: '中级',
  },
  {
    value: 'Option4',
    label: '高级',
  },
  {
    value: 'Option5',
    label: '实习生',
  },
  {
    value: 'Option5',
    label: '团队负责人',
  },
]
const options2 = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: 'Option2',
    label: '招聘中',
  },
  {
    value: 'Option3',
    label: '草稿',
  },
  {
    value: 'Option4',
    label: '已关闭',
  },

]
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

el-table__header {
  background-color: #ccc;
}

.options:hover {
  background-color: rgb(79, 79, 240);
  color: #fff;
}
</style>
